<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Draft</title>
        <link href="../css/global.css" rel="stylesheet" type="text/css" />
        <link href="../css/draft.css" rel="stylesheet" type="text/css" />
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="../js/global.js"></script>
        
        <h:outputStylesheet name="../css/global.css"/>
        <script src="http://code.jquery.com/jquery-latest.js"/>
        <h:outputScript name="../js/global.js"/>
        <!-- jquery DataTable !-->
        <h:outputStylesheet name="DataTables-1.9.4/media/css/jquery.dataTables.css"/>
        <h:outputScript name="DataTables-1.9.4/media/js/jquery.js"/>
        <h:outputScript name="DataTables-1.9.4/media/js/jquery.dataTables.js"/>
        <script language="javascript">
            $(document).ready(function(){
                $("[class$='round']").dataTable();
                 $("[class$='dataTable']").dataTable();
                $("div.navy").load("../../navy.xhtml");
            });
        </script>
    </h:head>
    <h:body>
    <div id="background">
        <div class="navy">
        </div>
        <f:view>  
            <h:form>  
                <div style="visibility: hidden;">  
                    <h:outputText class="white" value="#{leagueDraftBean.initiate()}"/>  
                </div>  
            </h:form>  
        </f:view>
        <div id="content">
            <div id="draftDiv">
                <div id="left" style="float:left;width:120px;height:500px;border: 2px solid #000; overflow:auto">
                    <f:view>
                        <h:form>
                            <h:dataTable value="#{leagueDraftBean.roundList}" var="round">
                                <h:column>
                                    <h:dataTable value="#{round}" var="item">
                                        <f:facet name="header">
                                            <h:outputText class="white" value="Round #{leagueDraftBean.roundNumber}" />
                                        </f:facet>
                                        <h:column>
                                            <h:outputText value="#{leagueDraftBean.pickNumber} #{item.name}" style="#{leagueDraftBean.displayPick>=leagueDraftBean.currentPick?leagueDraftBean.displayPick == leagueDraftBean.currentPick ? 'background: white; font-size:20px;':'':'color:gray;'}" />
                                        </h:column>
                                    </h:dataTable>
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </f:view>
                </div>
                <div id="center" style="float:left;width:600px;height:500px;border: 2px solid #000;">
                    <div style="width:600px;height:200px;">
                        <h:form id="selectedPlayerForm">
                            <table class="playername">
                                <tr>
                                    <td colspan="2"><h:outputText class="white" value="#{leagueDraftBean.selectedPlayer.firstName} #{leagueDraftBean.selectedPlayer.lastName}"/></td>
                                </tr>
                                <tr>
                                    <td style="padding: 8px;"><h:graphicImage url="#{leagueDraftBean.selectedPlayer.photoURL}"/></td>
                                    <td class="white">
                                        <table class="playerStats">
                                            <tr>
                                                <td>BYE</td>
                                                <td>'11 Projection</td>
                                                <td>Passing Yrd</td>
                                                <td>Pass TD</td>
                                                <td>Pass INT</td>
                                                <td>Rush Yrd</td>
                                                <td>Rush TD</td>
                                            </tr>
                                            <tr>
                                                <td><h:outputText value="#{leagueDraftBean.selectedPlayer.byeweek}"/></td>
                                                <td><h:outputText value="#{leagueDraftBean.selectedplayerstat.fantasyPoints}"/></td>
                                                <td><h:outputText value="#{leagueDraftBean.selectedplayerstat.passingYards}"/></td>
                                                <td><h:outputText value="#{leagueDraftBean.selectedplayerstat.passingTouchdowns}"/></td>
                                                <td><h:outputText value="#{leagueDraftBean.selectedplayerstat.interceptions}"/></td>
                                                <td><h:outputText value="#{leagueDraftBean.selectedplayerstat.rushingYards}"/></td>
                                                <td><h:outputText value="#{leagueDraftBean.selectedplayerstat.rushingTouchdowns}"/></td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td colspan="2">
                                        <h:form>
                                            <h:commandButton id="draftBTN" value="Draft Player" action="#{leagueDraftBean.draftPlayer}" disabled="#{leagueDraftBean.isDisableBTN()}"/>
                                        </h:form>
                                    </td>
                                </tr>
                            </table>  
                        </h:form>
                    </div>
                    <div style="width:600px;height:300px; overflow: auto">
                        <f:view>
                            <h:form>
                                <h:dataTable binding="#{leagueDraftBean.dataTable}" class="dataTable" id="playerDataTables" value="#{leagueDraftBean.joinplayerandstat}" var="item">
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="POS"/>
                                        </f:facet>
                                        <h:commandButton value="#{item.player.position}" action="#{leagueDraftBean.selectPlayer}" style="cursor:pointer;border:none; background:none;font-size:12px;"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Player"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.firstName} #{item.player.lastName}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Age"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.age}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Height"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.height}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Bye"/>
                                        </f:facet>
                                        <h:outputText value="#{item.player.byeweek}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Fantasy Points"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.fantasyPoints}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Passing Yards"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.passingYards}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Passing Touchdowns"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.passingTouchdowns}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Rushing Yards"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.rushingYards}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Interceptions"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.interceptions}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Rushing Touchdowns"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.rushingTouchdowns}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Receiving Yards"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.receivingYards}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Receiving Touchdowns"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.receivingTouchdowns}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Fumble Touchdowns"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.fumbleTouchdowns}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Field Goals Made"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.fieldGoalsMade}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Assisted Tackles"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.assistedTackles}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Defensive Touchdowns"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.defensiveTouchdowns}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Sacks"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.sacks}"/>
                                    </h:column>
                                    <h:column>
                                        <f:facet name="header">
                                            <h:outputText value="Kick Return Touchdowns"/>
                                        </f:facet>
                                        <h:outputText value="#{item.stat.kickReturnTouchdowns}"/>
                                    </h:column>
                                </h:dataTable>
                            </h:form>
                        </f:view>
                    </div>
                </div>
                
                <div id="right" style="float:left;width:200px;height:250px;border: 2px solid #000; overflow:auto;">
                    <f:view class="white">
                        <h:form>
                            <h:dataTable value="#{leagueDraftBean.draftHistory}" var="history">
                                <h:column>
                                    <h:dataTable value="#{history}" var="hr">
                                        <f:facet name="header">
                                            <h:outputText class="white" value="Round #{leagueDraftBean.roundNumber}" />
                                        </f:facet>
                                        <h:column>
                                            <h:outputText class="white" value="#{hr.totalPickNumber} #{hr.playerId.firstName} #{hr.playerId.lastName} #{hr.playerId.position} #{hr.teamId.name}"/>
                                        </h:column>
                                    </h:dataTable>
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </f:view>
                </div>
                <div style="width:200px;height:250px;border: 2px solid #000; overflow:auto;">
                    <f:view>
                        <h:form>
                            <h:dataTable value="#{leagueDraftBean.draftTeamHistory}" var="history">
                                <h:column>
                                    <h:dataTable value="#{history}" var="hr">
                                        <f:facet name="header">
                                            <h:outputText class="white" value="#{leagueDraftBean.getTeamName()}" />
                                        </f:facet>
                                        <h:column>
                                            <h:outputText class="white" value="#{hr.playerId.position} #{hr.playerId.firstName} #{hr.playerId.lastName}"/>
                                        </h:column>
                                    </h:dataTable>
                                </h:column>
                            </h:dataTable>
                        </h:form>
                    </f:view>
                </div>
            </div>
        </div>
    </div>
    </h:body>
</html>
